<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<!-- 使用最新的IE兼容模式渲染此网页 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<!-- 在双核浏览器下，默认使用webkit内核，由360浏览器提出 -->
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="../dist/font-awesome-4.7.0/css/font-awesome.css"/>
		<!-- 让IE9以下的浏览器支持HTML5标签 -->
		<!--[if lt IE 9]>
        	<script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
        	<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
	</head>
	<body>

		<nav class="navbar navbar-default bl-nav" role="navigation">
			<div class="container-fluid bl-container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed bl-button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9" aria-expanded="false">
			            <span class="sr-only">Toggle navigation</span>
			            <span class="icon-bar"></span>
			            <span class="icon-bar"></span>
			            <span class="icon-bar"></span>
		            </button>
					<a class="navbar-brand" href="index.html">HYQ的博客空间</a>
				</div>
				
				<div class="navbar-collapse collapse bl-button" id="bs-example-navbar-collapse-9" aria-expanded="false" style="height: 1px;">
					<ul class="nav navbar-nav navbar-right bl-navbar">
						<li><a href="#" data-toggle="modal" data-target="#myModal">登录</a></li>
						<li><a href="#" data-toggle="modal" data-target="#myModal1">注册</a></li>
					</ul>
				</div>
			</div>
			
		</nav>
		
			<!--登录-->
		<div class="modal fade bl-back" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog bl-modal-dialog ">
				<div class="modal-content loginbox lg-log">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title">账号密码登录</h4>
					</div>
					<form class="form-signin" role="form">
						<input type="email" class="form-control" placeholder="请输入用户名" required autofocus >
						<input type="password" class="form-control" placeholder="请输入密码" required>
						<div class="checkbox">
							<label><input type="checkbox" value="remember-me"> 记住我？</label>
						</div>
						<button class="btn btn-lg btn-primary btn-block lg" type="submit">登录</button>
					</form>
				</div>
			</div>
		</div>
		<!--注册-->
		<div class="modal fade bl-back" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog bl-modal-dialog">
				<div class="modal-content loginbox lg-log">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title">注册</h4>
					</div>
					<form class="form-signin" role="form">
						<input type="email" class="form-control" placeholder="请输入用户名" required autofocus>
						<input type="password" class="form-control" placeholder="请输入密码" required>
						<input type="password" class="form-control" placeholder="请确认密码" required>
						<div class="checkbox">
							<label><input type="checkbox" value="remember-me"> 记住我？</label>
						</div>
						<button class="btn btn-lg btn-primary btn-block" type="submit">注册</button>
					</form>
				</div>
			</div>
		</div>
		
		
		<div class="banner bl-banner">
			<h1 class="blogname" style="padding-top: 25px;">你若盛开，清风自来</h1>
			<p>不为失败哭泣，只为失败斗争。 http://17638691032.qzone.qq.com</p>
			<img src="img/100.jpg" class="img-responsive bl-img" alt="Responsive image" >
			
			<nav class="navbar navbar-inverse" style="margin-top: 10px;">
			  <div class="container">
			  		<ul class="bl-ul row" style="padding-left: 209px;">
			  			<li class="bl-li"><a href="">主页</a></li>
			  			<li class="bl-li"><a href="">日志</a></li>
			  			<li class="bl-li"><a href="">音乐</a></li>
			  			<li class="bl-li"><a href="">相册</a></li>
			  			<li class="bl-li"><a href="">留言板</a></li>
			  			<li class="bl-li"><a href="">说说</a></li>
			  			<li class="bl-li"><a href="">个人档</a></li>
			  			<li class="bl-li"><a href="">更多</a></li>
			  			
			  		</ul>
			  </div>
			</nav>
		</div>
		
		
		<!--内容开始-->
		
		<section class=" container bl-content">
			<div class="col-md-8" id="articles">
				<div class="bl-title bl-title-border row" ><h4 class="blogname" style="padding: 15px;border-bottom: 1px dashed;margin-left: 15px;">文章推荐</h4></div>

				<!--<div class="bl-title row">
					<div class="col-xs-3">
						<img src="img/j1.jpg" class="img-responsive bl-img-j" alt="Responsive image" >
					</div>
					
					<div class="col-xs-9">
						<h4><a href="">文章推荐【匆匆那些年】总结个人博客经历的这四年…</a></h4>
						<p>博客从最初的域名购买，到上线已经有四年的时间了，这四年的时间，有笑过，有怨过，有悔过，有执着过，也有放弃过…但最后还是坚持了下来，时间如此匆匆，等再回过头已来不及去弥补…</p>
						<p class="item">
							<span class="glyphicon glyphicon-th-large"></span><span class="classify">分类:回忆</span>
							<span class="glyphicon glyphicon-time"></span><span class="introduce-time">发布时间：2016-12-28</span>
							<span class="glyphicon glyphicon-heart"></span><span class="read">阅读次数(<span class="read-more">18</span>)</span>
						</p>
					</div>
					
				</div>-->
<!--				
				<div class="bl-title row">
					<div class="col-xs-3">
						<img src="img/j2.jpg" class="img-responsive bl-img-j" alt="Responsive image" >
					</div>
					
					<div class="col-xs-9">
						<h4><a href="">【匆匆那些年】总结个人博客经历的这四年…</a></h4>
						<p>博客从最初的域名购买，到上线已经有四年的时间了，这四年的时间，有笑过，有怨过，有悔过，有执着过，也有放弃过…但最后还是坚持了下来，时间如此匆匆，等再回过头已来不及去弥补…</p>
						<p class="item">
							<span class="glyphicon glyphicon-th-large"></span><span class="classify">分类:回忆</span>
							<span class="glyphicon glyphicon-time"></span><span class="introduce-time">发布时间：2016-12-28</span>
							<span class="glyphicon glyphicon-heart"></span><span class="read">阅读次数(<span class="read-more">18</span>)</span>
						</p>
					</div>
					
				</div>
				<div class="bl-title row">
					<div class="col-xs-3">
						<img src="img/j3.jpg" class="img-responsive bl-img-j" alt="Responsive image" >
					</div>
					
					<div class="col-xs-9">
						<h4><a href="detail.html">【匆匆那些年】总结个人博客经历的这四年…</a></h4>
						<p>博客从最初的域名购买，到上线已经有四年的时间了，这四年的时间，有笑过，有怨过，有悔过，有执着过，也有放弃过…但最后还是坚持了下来，时间如此匆匆，等再回过头已来不及去弥补…</p>
						<p class="item">
							<span class="glyphicon glyphicon-th-large"></span><span class="classify">分类:回忆</span>
							<span class="glyphicon glyphicon-time"></span><span class="introduce-time">发布时间：2016-12-28</span>
							<span class="glyphicon glyphicon-heart"></span><span class="read">阅读次数(<span class="read-more">18</span>)</span>
						</p>
					</div>
					
				</div>
				<div class="bl-title row">
					<div class="col-xs-3">
						<img src="img/j4.png" class="img-responsive bl-img-j" alt="Responsive image" >
					</div>
					
					<div class="col-xs-9">
						<h4><a href="detail.html">【匆匆那些年】总结个人博客经历的这四年…</a></h4>
						<p>博客从最初的域名购买，到上线已经有四年的时间了，这四年的时间，有笑过，有怨过，有悔过，有执着过，也有放弃过…但最后还是坚持了下来，时间如此匆匆，等再回过头已来不及去弥补…</p>
						<p class="item">
							<span class="glyphicon glyphicon-th-large"></span><span class="classify">分类:回忆</span>
							<span class="glyphicon glyphicon-time"></span><span class="introduce-time">发布时间：2016-12-28</span>
							<span class="glyphicon glyphicon-heart"></span><span class="read">阅读次数(<span class="read-more">18</span>)</span>
						</p>
					</div>
					
				</div>
				<div class="bl-title row">
					<div class="col-xs-3">
						<img src="img/j5.jpg" class="img-responsive bl-img-j" alt="Responsive image" >
					</div>
					
					<div class="col-xs-9">
						<h4><a href="detail.html">【匆匆那些年】总结个人博客经历的这四年…</a></h4>
						<p>博客从最初的域名购买，到上线已经有四年的时间了，这四年的时间，有笑过，有怨过，有悔过，有执着过，也有放弃过…但最后还是坚持了下来，时间如此匆匆，等再回过头已来不及去弥补…</p>
						<p class="item">
							<span class="glyphicon glyphicon-th-large"></span><span class="classify">分类:回忆</span>
							<span class="glyphicon glyphicon-time"></span><span class="introduce-time">发布时间：2016-12-28</span>
							<span class="glyphicon glyphicon-heart"></span><span class="read">阅读次数(<span class="read-more">18</span>)</span>
						</p>
					</div>
					
				</div>
				-->
			</div>	
			
			
			<div class="col-md-4" >
				<div class="bl-title bl-title-border row"><h4 class="blogname" style="padding: 15px;border-bottom: 1px dashed;">阅读排行 </h4></div>
				<div class="bl-title bl-title-border row">
					<ul class="list-group" id="readRank">
						<li class="list-group-item active " style="background:#8c8262;border: none;">阅读排行</li>
						<!--<li class="list-group-item"><a href="">1、图像的数量</a><span class="badge">14</span></li>
						<li class="list-group-item"><a href="">2、免费 Window 空间托管</a><span class="badge">13</span></li>
						<li class="list-group-item"><a href="">3、图像的数量</a><span class="badge">12</span></li>
						<li class="list-group-item"><a href="">4、 支持</a><span class="badge">11</span></li>
						<li class="list-group-item"><a href="">5、每年更新成本</a><span class="badge">10</span></li>
						<li class="list-group-item"><a href="">6、免费 Window 空间托管</a><span class="badge">9</span></li>
						<li class="list-group-item"><a href="">7、图像的数量</a><span class="badge">8</span></li>
						<li class="list-group-item"><a href="">8、支持</a><span class="badge">7</span></li>-->
					</ul>
				</div>
				
			</div>
		

		</section>
		
		
		

	</body>
	
	<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/index.js" type="text/javascript""></script>
</html>
